<template>
  <PageWrapper>
    <button @click="triggerBtn">点击执行</button>
    <p id="msg"></p>
    <div class="container">
      <div id="ball"></div>
    </div>
    <div>源码:</div>
    <div class="code-wrap">
      <div v-html="code"></div>
    </div>
  </PageWrapper>
</template>

<script setup>
import { runTask } from './index'
import { ref, nextTick, onMounted } from 'vue';
import { useCode } from '@/hooks/useCode'

const code = ref('')

const n = 1000;
const tasks = new Array(n).fill(delay)

function triggerBtn() {
  msg.innerHTML = '执行中...'
  setTimeout(async () => {
    const start = Date.now();
    await Promise.all(tasks.map((t) => runTask(t)))
    const end = Date.now();
    msg.innerHTML = `执行完成，耗时：${end - start}ms`
  }, 0);
}
function delay() {
  const duration = 5;
  const start = Date.now();
  while(Date.now() - start < duration) {}
}

onMounted(async () => {
  nextTick(() => {
    const msg = document.querySelector('#msg')
    const ball = document.querySelector('#ball')

    msg.textContent = '未执行'

    console.log(msg.innerHTML);
    let i = 0
    setInterval(() => {
      i+=10
      if (i > 500) {
        i = 0
      }
      ball.style.transform = `translateX(${++i}px)`
    }, 300);
  })
  code.value = await useCode('./index.js')
})
</script>

<style>
.container {
  width: 100%;
  height: 100px;
  position: relative;
}
/* 无效动画左右滑动 */
#ball{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #f00;
  position: absolute;
  left: 0;
  top: 0;
}
</style>
